<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>添加商品</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">

</head>
<body>
<%@include file="../resources/nav.jsp"%>
<div class="container-fluid" style="margin-top: 100px;">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <form action="/Mall/product/add" method="post" >
                <table class="text-center table table-bordered" align="center" width="100%" >
                    <tr  class="bg-light text-black-50">
                        <th colspan="2" ><h3>商品入库</h3></th>
                    </tr>
                    <tr>
                        <td style="width: 150px;">名称：</td>
                        <td><input class="form-control" placeholder="商品名称" type="text"  name="name"></td>

                    </tr>
                    <tr>
                        <td>单价：</td>
                        <td><input class="form-control" placeholder="单价" type="text" name="price"></td>
                    </tr>
                    <tr>
                        <td>库存：</td>
                        <td><input class="form-control" placeholder="库存" type="text" name="sum"></td>
                    </tr>
                    <tr>
                        <td>详情：</td>
                        <td><textarea class="form-control" name="info" id="info" cols="30" rows="5"></textarea></td>
                    </tr>
                    <tr>
                        <td>图片：</td>
                        <td> <br><div id="imgDiv" style="display:block; width: 40px; height: 50px;"><img src="" width="100px" height="100px" /></div><br><br><br><br>
                            <input type="file" id="pimage" name="pimage" onchange="fileChange()">
                            <input type="hidden" id="imageUrl" name="imageUrl" value="">
                            <span id="imgName"></span><br>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a class="btn btn-primary" href="${pageContext.request.contextPath}/product/list">返回</a>
                            <input class="btn btn-outline-warning" type="reset" value="清空">
                        </td>
                        <td><input class="btn btn-success" style="width: 200px" type="submit" value="添加"></td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/ajaxfileupload.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    function fileChange(){
        $.ajaxFileUpload({
            url:"${pageContext.request.contextPath}/upload",
            secureuri: false,
            fileElementId: 'pimage',
            dataType:"json",
            success:function (obj) {
                //清空div
                $("#imgDiv").empty();
                //创建一个图片的标签
                var imgObj = $("<img>");
                // 将图片的URL传到HttpServletRequest
                document.getElementById("imageUrl").value = obj.imageUrl;
                imgObj.attr("src",obj.imageUrl);
                imgObj.attr("width","100px");
                imgObj.attr("height","100px");
                //将图片追加到imgDiv
                $("#imgDiv").append(imgObj);
            }
        });
    }
</script>
</html>
